<template>
	<div class="page-container">
		<h1>分隔处理</h1>
		<el-form :model="form" label-position="top">
			<el-form-item label="待处理文本">
				<el-input type="textarea" v-model.trim="form.text" placeholder="请输入待处理文本"></el-input>
			</el-form-item>
			<el-form-item label="当前分隔">
				<el-radio-group v-model="form.currentDelimiter">
					<el-radio-button label="回车（换行）">回车（换行）</el-radio-button>
					<el-radio-button label="英文逗号">英文逗号</el-radio-button>
					<el-radio-button label="中文逗号">中文逗号</el-radio-button>
					<el-radio-button label="顿号">顿号</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="处理方式">
				<el-radio-group v-model="form.processingMethod">
					<el-radio-button label="数组化">数组化</el-radio-button>
					<el-radio-button label="英文逗号">英文逗号</el-radio-button>
					<el-radio-button label="中文逗号">中文逗号</el-radio-button>
					<el-radio-button label="顿号">顿号</el-radio-button>
					<el-radio-button label="自定义">自定义</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-show="form.processingMethod === '自定义'" label="自定义分隔符">
				<el-input v-model.trim="form.customDelimiter" placeholder="请输入自定义分隔符"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="execute">执行</el-button>
			</el-form-item>
		</el-form>
		<el-form label-position="top">
			<el-form-item label="处理结果">
				<el-input type="textarea" v-model="resultText"></el-input>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					text: "",
					currentDelimiter: "回车（换行）",
					processingMethod: "数组化",
					customDelimiter: "",
				},
				resultText: "",
			};
		},
		methods: {
			execute() {
				const text = this.form.text;
				const currentDelimiter = this.form.currentDelimiter;
				const processingMethod = this.form.processingMethod;
				const customDelimiter = this.form.customDelimiter;

				if (!text) {
					this.$message.error("请输入待处理文本！");
					return;
				}

				let result;
				// 根据当前分隔符拆分文本
				let delimiter;
				switch (currentDelimiter) {
					case "回车（换行）":
						delimiter = "\n";
						break;
					case "英文逗号":
						delimiter = ",";
						break;
					case "中文逗号":
						delimiter = "，";
						break;
					case "顿号":
						delimiter = "、";
						break;
					default:
						delimiter = "";
						break;
				}

				result = text.split(delimiter);

				if (processingMethod === "数组化") {
					// 将处理结果转换为数组形式
					result = JSON.stringify(result);
				} else {
					// 根据处理方式连接处理结果
					let separator;
					switch (processingMethod) {
						case "英文逗号":
							separator = ", ";
							break;
						case "中文逗号":
							separator = "，";
							break;
						case "顿号":
							separator = "、";
							break;
						case "自定义":
							separator = customDelimiter;
							break;
						default:
							separator = "";
							break;
					}

					result = result.join(separator);
				}

				this.resultText = result;
			},
		},
	};
</script>